<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<header></header>
				<section>
					<van-cell-group class="input-group">
						<van-field v-model.trim="email" placeholder="请输入邮箱账号" class="input" maxlength="250" />
						<van-field v-model.trim="yzm" placeholder="请输入验证码" class="input" maxlength="6">
							<van-button type="info" slot="button" :class="disabled?'disable':''" @click="getCode" :loading="yzmLoading" :disabled="disabled">{{codeText}}</van-button>
						</van-field>
						<van-field v-model.trim="password" placeholder="请输入密码" class="input" type="password" maxlength="18" />
						<van-field v-model.trim="password2" placeholder="请再次输入密码" class="input" type="password" maxlength="18" />
						<van-field v-model.trim="yqm" placeholder="请输入邀请码" class="input" maxlength="8" />
					</van-cell-group>
					<div class="bottom">
						<div class="row-justify-content login-wrap">
							<div class="column-space-between">
								<van-button type="info" class="login" @click="Register" :loading="loading">注册</van-button>
								<router-link to="/Login">登录</router-link>
							</div>
						</div>
						<div class="read">
							<img v-if="checkImg" src="../../../assets/images/checked.png" @click="choose" />
							<img v-else src="../../../assets/images/check.png" @click="choose" /> 同意协议并且注册
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from "./../../../utils/api";
	export default {
		data() {
			return {
				codeText: "获取验证码",
				disabled: false,
				currentTime: 60,
				checkImg: false,
				email: "",
				yzm: "",
				password: "",
				password2: "",
				yqm: "",
				loading: false,
				yzmLoading: false
			};
		},
		components: {},
		methods: {
			//验证码倒计时
			countDown() {
				let that = this;
				this.disabled = true;
				let currentTime = this.currentTime;
				that.codeText = "重新获取 " + currentTime + "s";
				let interval = setInterval(function() {
					let time = currentTime - 1 + "s";
					that.codeText = "剩余 " + time;
					currentTime--;
					if(currentTime <= 0) {
						clearInterval(interval);
						that.codeText = "发送验证码";
						that.currentTime = 60;
						that.disabled = false;
					}
				}, 1000);
			},
			getCode() {
				const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(!regEmail.test(this.email)) {
					this.$toast("请输入正确的邮箱格式");
					return false;
				}
				this.yzmLoading = true;
				base
					.getRegisterEmail({
						userName: this.email
					})
					.then(res => {
						if(res.code == 200) {
							this.$toast(res.data.message);
							this.countDown();
						}
						this.yzmLoading = false;
					});
			},
			choose() {
				this.checkImg = !this.checkImg;
			},
			Register() {
				if(!this.email) {
					this.$toast("邮箱账号不能为空");
					return false;
				} else {
					if(this.email.length < 8 || this.email.length > 250) {
						this.$toast("邮箱长度为8到250位");
						return false;
					}
				}
				const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(!regEmail.test(this.email)) {
					this.$toast("请输入正确的邮箱格式");
					return false;
				}
				if(!this.yzm) {
					this.$toast("验证码不能为空");
					return false;
				}
				if(!this.password) {
					this.$toast("密码不能为空");
					return false;
				} else {
					if(this.password.length < 6 || this.password.length > 18) {
						this.$toast("密码长度为6到18位");
						return false;
					}
				}
				if(!this.password2) {
					this.$toast("确认密码不能为空");
					return false;
				} else {
					if(this.password2.length < 6 || this.password2.length > 18) {
						this.$toast("确认密码长度为6到18位");
						return false;
					}
				}
				if(!this.yqm) {
					this.$toast("邀请码不能为空");
					return false;
				}
				if(!this.checkImg) {
					this.$toast("请同意注册协议");
					return false;
				}
				this.loading = true;
				base
					.getRegister({
						userName: this.email,
						code: this.yzm,
						password: this.password,
						confirmPassword: this.password2,
						invitationCode: this.yqm
					})
					.then(res => {
						if(res.code == 200) {
							this.$router.push({
								path: "Login"
							});
						}
						this.loading = false;
						this.$toast(res.msg);
					});
			}
		},
		watch: {
			// 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			password: function() {
				this.password = this.password.replace(/[\u4e00-\u9fa5]/gi, ""); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			password2: function() {
				this.password2 = this.password2.replace(/[\u4e00-\u9fa5]/gi, ""); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			email: function() {
				this.email = this.email.replace(/[\u4e00-\u9fa5]/gi, ""); // 帐号不能输入中文
			},
			yzm: function() {
				this.yzm = this.yzm.replace(/[\u4e00-\u9fa5]/gi, ""); // 验证码不能输入中文
			},
			yqm: function() {
				this.yqm = this.yqm.replace(/[\u4e00-\u9fa5]/gi, ""); // 邀请码不能输入中文
			}
		}
	};
</script>

<style lang="scss" scoped>
	header {
		background: url(../../../assets/images/loginbg.png) no-repeat;
		background-size: 100%;
		height: 40vh;
	}
	
	section {
		padding-right: 18px;
		box-sizing: border-box;
		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			border-top: none;
			border-bottom: none;
		}
		.van-cell-group {
			.input {
				padding-left: 21px;
				font-size: 13px;
			}
			div:last-child::after {
				position: absolute;
				box-sizing: border-box;
				content: " ";
				pointer-events: none;
				right: 0;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}
			button {
				font-size: 11px;
				width: 65px;
				padding: 0;
				height: 20px;
				line-height: 19px;
				border-radius: 6px;
			}
			.disable {
				color: #ccc !important;
				background: none;
				border: 1px solid #ccc;
			}
		}
		.bottom {
			margin-top: 50px;
			.login-wrap {
				height: 80px;
				a {
					color: #3895fd;
					font-size: 12px;
					text-align: center;
				}
				.login {
					border-radius: 20px;
					width: 171px;
					height: 40px;
				}
			}
			.read {
				width: 130px;
				margin: 0 auto;
				margin-top: 20px;
				color: #b8c2cb;
				font-size: 12px;
				img {
					width: 14px;
					height: 14px;
					vertical-align: -2px;
					margin-right: 5px;
				}
			}
		}
	}
</style>